<template>
	<base-page class="edit-form base-form" style="width: 100vw" title="帖子详情" @back="onCancel">
		<view class="main-box">
			<view class="content-box">
				<view v-for="(post,k) in postList" class="star-post-item" @click="selectPost"
					@longpress="longpressPost">
					<view class="user-box">
						<image class="avatar" :src="post.avatar || defaultImg" :mode="propOption.avatarMode"
							@click.stop="clickUserAvatar">
						</image>
						<view class="center">
							<view class="nickname-box">
								<view class="nickname" @click.stop="clickUserNickname">
									{{post.teacherIdDictMap.name}}
								</view>
							</view>
							<view v-if="post.createTime" class="time">
								{{(post.createTime)}}
							</view>
						</view>
					</view>
					<view v-if="post.title" class="title" :style="{marginLeft: propOption.mode===2 ? '0':'100rpx'}">
						<text user-select>{{post.title}}</text>
					</view>
					<view v-if="post.theme" class="content"
						:class="propOption.lineShow?`star-line-${propOption.lineShow.toString()}`:'content-class'"
						:style="{marginLeft: propOption.mode===2 ? '0':'100rpx'}">
						<text :user-select="!propOption.lineShow">{{post.theme}}</text>
					</view>
					<view v-if="post.courseForumFiles&&post.courseForumFiles.length>0" class="img-list-box"
						:style="{marginLeft: propOption.mode===2 ? '0':'100rpx'}">
						<!-- #ifdef MP -->
						<image v-for="(img, index) in post.courseForumFiles" :key="index" class="img"
							:style="{height: propOption.mode===2 ? 'calc((100vw - 40rpx - 30rpx) / 3)':'calc((100vw - 40rpx - 30rpx - 100rpx) / 3)', width: propOption.mode===2 ? 'calc((100vw - 40rpx - 30rpx) / 3)':'calc((100vw - 40rpx - 30rpx - 100rpx) / 3)'}"
							:src="img.filePath" :mode="propOption.imgMode"
							@click.stop="previewImg(post.courseForumFiles,index)"></image>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<image v-for="(img, index) in post.courseForumFiles" :key="index" class="img"
							:style="{height: propOption.mode===2 ? 'calc((100vw - 60px) / 3)':'calc((100vw - 110px) / 3)', width: propOption.mode===2 ? 'calc((100vw - 60px) / 3)':'calc((100vw - 110px) / 3)'}"
							:src="img.filePath" :mode="propOption.imgMode"
							@click.stop="previewImg(post.courseForumFiles,index)"></image>
						<!-- #endif -->
					</view>
					<!-- <view class="topic-container">
				<view v-if="post.topic" class="topic-box">
					<image class="icon" :src="post.topic.icon"></image>
					<view class="text">
						{{post.topic.name}}
					</view>
				</view>
			</view> -->

					<view
						v-if="propOption.showFooter&&(propOption.showShare||propOption.showView||propOption.showComment||propOption.showLike)"
						class="footer" :style="{marginLeft: propOption.mode===2 ? '0':'100rpx'}">
						<view class="item-box" @click.stop="clickSharePost">
							<image class="icon" :src="propOption.iconShare"></image>
							<view class="text">
								{{ (post.shareCount) || '分享'+(post.shareCount) }}
							</view>
						</view>
						<!-- <view v-if="propOption.showView" class="item-box">
							<image class="icon" :src="propOption.iconView"></image>
							<view class="text">
								{{ (post.viewCount) || '围观' }}
							</view>
						</view> -->
						<view v-if="propOption.showComment" class="item-box" @click.stop="clickCommentPost">
							<image class="icon" :src="propOption.iconComment"></image>
							<view class="text">
								{{ (post.commentCount) || '评论' }}
							</view>
						</view>
						<view v-if="propOption.showLike" class="item-box" hover-stop-propagation
							@click.stop="toggleLike">
							<image v-if="isLiked" class="icon scale-ver-center" :src="propOption.iconLiked">
							</image>
							<image v-else class="icon" :src="propOption.iconLike">
							</image>
							<view class="text">
								<!-- {{ (propOption.likeCount) || '点赞'+(propOption.likeCount) }} -->
                                {{ propOption.likeCount || '点赞'+0 }}
							</view>
						</view>
					</view>
					<view v-if="propOption.showCheckBtn&&(propOption.showCheckFail||propOption.showCheckPass)"
						class="btn-list-box">
						<button v-if="propOption.showCheckFail" class="btn" type="warn"
							@click.stop="clickFailPost">驳回</button>
						<button v-if="propOption.showCheckPass" class="btn" type="primary"
							@click.stop="clickPassPost">通过</button>
					</view>
					<slot name="footer"></slot>
				</view>
			</view>
		</view>
		<StarCommentReply ref="starCommentReplyRef" :option="replyOption" @sendComment="sendComment"></StarCommentReply>

	</base-page>
</template>

<script>
	import StarCommentReply from '@/uni_modules/star-community/components/star-comment-reply/star-comment-reply.vue'

	import {
		showMessage,
		getToken
	} from '@/utils';
	import {
		Leader,
	} from '@/api';
	import {
		uploadMixin,
		statsDateRangeMixin
	} from '@/utils/mixins';
	import projectConfig from '@/core/config'
	export default {
		name: 'mobileApplyInfo',
		mixins: [uploadMixin, statsDateRangeMixin],
        components: {
			StarCommentReply
		},
		data() {
			return {
                replyOption: {
					imgMaxCount: 9, // 选择图片最大数量
					// imgMaxSize: 5, // 单位：M
					// iconImgRemove: '/static/remove.svg'
					// iconImg: '/static/chooseImg.svg', // 选择图片icon
				},
				postList: [],
				// postList: require('./data.json'),
				defaultImg: require('../../static/login/login2.jpg'),
				propOption: {
					mode: 2,
					avatarMode: 'aspectFill',
					imgMode: 'aspectFill',
					// lineShow: 6, // 超出多少行显示省略号
					showFooter: true,
					showCheckBtn: false,
					showCheckFail: true,
					showCheckPass: true,
					showFocus: true,
					showChat: true,
					showMore: true,
					showShare: true,
					showView: true,
					showComment: true,
					showLike: true,
					showDelete: true,
					iconShare: '/uni_modules/star-community/static/share.svg',
					iconView: '/uni_modules/star-community/static/view.svg',
					iconComment: '/uni_modules/star-community/static/comment.svg',
					iconLike: '/uni_modules/star-community/static/like.svg',
					iconLiked: '/uni_modules/star-community/static/liked.svg',
					iconDelete: '/uni_modules/star-community/static/delete.svg',
					iconMore: '/uni_modules/star-community/static/more.svg',
				},

				isFocusUser: this.post?.isFocusUser || false,
				isLiked: this.post?.isLiked || false,
				likeCount: this.post?.likeCount || 0,


				formData: {
					// id
					id: undefined,
					// 班级id
					classId: undefined,
					// 姓名
					name: undefined,

					officerId: undefined,
					// 手机号码
					path: undefined,

				},
				classIdWidget: [],
				ganbuWidget: {},
				rules: {
					'name': [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
						transform: (value) => String(value)
					}],
					'phone': [{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur',
						transform: (value) => String(value)
					}],

					'jobTitle': [{
						required: true,
						message: '请填写职务',
						trigger: 'blur',
						transform: (value) => String(value)
					}],

				},
				fileList: []

			}
		},
		onShow() {
			this.initData()
		},
		watch: {
			option: {
				handler(newVal, oldVal) {
					this.propOption = {
						...this.propOption,
						...newVal
					}
				},
				deep: true, // 深度监听
				immediate: true // 立即执行
			}
		},
		methods: {
			// timeFrom,
			// numberFormat,
			initData() {
				const obj = {
					courseForumDtoFilter: {}
				}
				Leader.getForumList(this, obj)
					.then((res) => {
						this.postList = res
					})
					.catch((e) => {});
			},
			numberFormat(number) {
				if (number >= 10000) {
					const result = (number / 10000).toFixed(2);
					return result.replace(/\.?0*$/, '') + " w";
				} else if (number >= 1000) {
					const result = (number / 1000).toFixed(2);
					return result.replace(/\.?0*$/, '') + " k";
				} else if (number == 0) {
					return 0
				} else {
					const result = number.toFixed(2);
					return result.replace(/\.?0*$/, '');
				}
			},
			onCancel() {
				uni.navigateBack();
			},
			// 选中帖子
			selectPost() {
				this.$emit('selectPost', this.post)
			},
			// 长按帖子
			longpressPost() {
				this.$emit('longpressPost', this.post)
			},
			// 选中用户头像
			clickUserAvatar() {
				this.$emit('clickUserAvatar', this.post)
			},
			// 选中用户昵称
			clickUserNickname() {
				this.$emit('clickUserNickname', this.post)
			},
			// 点击关注用户
			clickFocusUser() {
				this.isFocusUser = true
				this.$emit('clickFocusUser', this.post)
			},
			// 点击私聊用户
			clickChatUser() {
				this.$emit('clickChatUser', this.post)
			},
			// 点击分享帖子
			clickSharePost() {
				this.$emit('clickSharePost', this.post)
			},
			// 点击评论帖子
			clickCommentPost() {
				this.$emit('clickCommentPost', this.post)
			},
			// 点击预览图片
			previewImg(urls, current) {
				urls = urls.map(item => {
					return item.filePath;
				});
				uni.previewImage({
					urls,
					current
				})
			},
			// 点击喜欢
			toggleLike() {
				// 根据当前的 isLiked 状态来增加或减少点赞数量
				this.likeCount = this.isLiked ? this.likeCount - 1 : this.likeCount + 1;
				this.isLiked = !this.isLiked;

				this.$emit('toggleLike', this.post, this.isLiked)
			},
			// 删帖
			clickDeletePost() {
				this.$emit('clickDeletePost', this.post)
			},
			// 驳回帖子
			clickFailPost() {
				this.$emit('clickFailPost', this.post)
			},
			// 通过帖子
			clickPassPost() {
				this.$emit('clickPassPost', this.post)
			},
            // 发送评论
			sendComment(comment) {
				console.log('发送评论');

				let vuex_user = this.vuex_user // 从缓存获取我的用户信息

				// 必要信息，请替换成实际值
				let myComment = {
					status: 0, // 0 审核中 1 正常 2 审核不通过 3 已删除 4 已违规
					commentCount: 0,
					commentList: [],
					content: comment.content,
					createTime: Date.now(),
					id: Date.now().toString(),
					imgList: comment.imgList, // 在此之前请将临时路径替换成线上路径
					likeCount: 0,
					post_id: this.post.id,
					user_id: vuex_user.id,
				}

				// 需要回复的父评论
				let fatherComment, fatherCommentIndex = -1
				fatherCommentIndex = this.commentList.findIndex(fatherComment => fatherComment.id === comment
					?.to_father_id) // 父评论下标
				if (fatherCommentIndex > -1) {
					fatherComment = this.commentList[fatherCommentIndex]
				}

				// 需要回复的子评论
				let childComment, childCommentIndex = -1
				if (fatherCommentIndex > -1) {
					let childCommentList = fatherComment.commentList
					childCommentIndex = childCommentList.findIndex(childComment => childComment.id === comment
						?.to_child_id)
					if (childCommentIndex > -1) {
						childComment = fatherComment.commentList[childCommentIndex]
					}
				}

				// 回复子评论
				if (fatherComment && childComment) {
					myComment.father_id = fatherComment.id
					myComment.reply_child_id = childComment.id

					// await 添加至数据库

					myComment.avatar = vuex_user.avatar
					myComment.nickname = vuex_user.nickname
					myComment.isNewComment = true // 优化显示体验，请勿将此字段添加至数据库
					myComment.replyChildComment = childComment
					this.commentList[fatherCommentIndex].commentList.splice(childCommentIndex + 1, 0, myComment)
				}
				// 回复父评论
				else if (fatherComment) {
					myComment.father_id = fatherComment.id

					// await 添加至数据库

					myComment.avatar = vuex_user.avatar
					myComment.nickname = vuex_user.nickname
					myComment.isNewComment = true // 优化显示体验，请勿将此字段添加至数据库
					this.commentList[fatherCommentIndex].commentList.unshift(myComment)
				}
				// 回复帖子
				else {
					// await 添加至数据库

					myComment.avatar = vuex_user.avatar
					myComment.nickname = vuex_user.nickname
					this.commentList.unshift(myComment)
				}

				// 重置评论框
				this.$refs.starCommentReplyRef.resetCommentReply()
				this.$refs.starCommentReplyRef.placeholder = comment.placeholder // 延用回复占位符
				this.$refs.starCommentReplyRef.to_father_id = comment.to_father_id // 延用回复父评论
				this.$refs.starCommentReplyRef.to_child_id = comment.to_child_id // 延用回复子评论
				this.$refs.starCommentReplyRef.to_user_id = comment.to_user_id // 延用回复谁
				uni.showToast({
					title: '发送成功'
				})
			},
		},
		mounted() {}
	};
</script>

<style scoped lang="scss">
	.release-fixed {
		position: fixed;
		/* #ifdef MP */
		bottom: 50rpx;
		/* #endif */
		/* #ifndef MP */
		bottom: calc(130rpx + constant(safe-area-inset-bottom));
		bottom: calc(130rpx + env(safe-area-inset-bottom));
		/* #endif */
		right: 20rpx;
		background-color: #55aaff;
		color: #fff;
		height: 80rpx;
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	/* start--文本行数限制--start */
	.star-line-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.star-line-2 {
		-webkit-line-clamp: 2;
	}

	.star-line-3 {
		-webkit-line-clamp: 3;
	}

	.star-line-4 {
		-webkit-line-clamp: 4;
	}

	.star-line-5 {
		-webkit-line-clamp: 5;
	}

	.star-line-6 {
		-webkit-line-clamp: 6;
	}

	.star-line-7 {
		-webkit-line-clamp: 7;
	}

	.star-line-8 {
		-webkit-line-clamp: 8;
	}

	.star-line-9 {
		-webkit-line-clamp: 9;
	}

	.star-line-2,
	.star-line-3,
	.star-line-4,
	.star-line-5,
	.star-line-6,
	.star-line-7,
	.star-line-8,
	.star-line-9 {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; // 弹性伸缩盒
		-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
	}

	/* end--文本行数限制--end */

	.scale-ver-center {
		animation: scale-ver-center .4s cubic-bezier(.39, .575, .565, 1.000) both;
	}

	@keyframes scale-ver-center {
		0% {
			transform: scale(.9)
		}

		50% {
			transform: scale(1.5)
		}

		100% {
			transform: scale(1)
		}
	}

	.star-post-item {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx #eee solid;

		.user-box {
			display: inline-flex;
			align-items: center;

			.avatar {
				height: 80rpx;
				width: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
				margin-right: 20rpx;
			}

			.center {
				flex: 1;
				padding-right: 10rpx;

				.nickname-box {
					display: inline-flex;
					align-items: center;

					.nickname {
						font-size: 26rpx;
						font-weight: 600;
						color: #55aaff;
					}
				}

				.time {
					margin-top: 10rpx;
					font-size: 20rpx;
				}
			}

			.right {
				display: inline-flex;
				align-items: center;

				.focus-box {
					border: 2rpx #55aaff solid;
					border-radius: 100rpx;
					color: #55aaff;
					font-size: 26rpx;
					padding: 6rpx 20rpx;
				}

				.chat-box {
					@extend .focus-box;
				}

				.delete-box {
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: red;
				}

				.status-box {
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: 700;
					color: orange;
				}

				.more-icon {
					margin-left: 20rpx;
					height: 50rpx;
					width: 50rpx;
					flex-shrink: 0;
				}
			}
		}

		.title {
			margin-top: 20rpx;
			font-size: 34rpx;
			font-weight: 700;
		}

		.content {
			margin-top: 20rpx;
			font-size: 30rpx;
		}

		.content-class {
			white-space: normal;
			word-wrap: break-word;
			overflow: hidden;
		}

		.img-list-box {
			margin-top: 10rpx;
			display: inline-flex;
			flex-wrap: wrap;

			.img {
				margin: 10rpx 10rpx 0 0;
				flex-shrink: 0;
				border-radius: 20rpx;
				height: 200rpx;
				width: 200rpx;
			}
		}

		.topic-container {
			margin-top: 20rpx;

			.topic-box {
				padding: 8rpx 14rpx;
				border-radius: 20rpx;
				display: inline-flex;
				align-items: center;
				border: 2rpx #eee solid;

				.icon {
					flex-shrink: 0;
					height: 30rpx;
					width: 30rpx;
					margin-right: 10rpx;
				}

				.text {
					font-size: 26rpx;
				}
			}
		}

		.footer {
			margin-top: 20rpx;
			display: inline-flex;
			justify-content: space-between;

			.item-box {
				display: inline-flex;
				align-items: center;

				.icon {
					flex-shrink: 0;
					height: 50rpx;
					width: 50rpx;
					margin-right: 10rpx;
				}

				.text {
					width: 100rpx;
					text-align: center;
					font-size: 26rpx;
				}
			}
		}

		.btn-list-box {
			margin-top: 20rpx;
			width: 100%;
			display: inline-flex;
			align-items: center;
			gap: 20rpx; // 部分机型不支持，管他呢，我的机型支持就行了

			.btn {
				flex: 1;
			}
		}
	}
</style>